<template>
  <lay-row v-if="!appStore.collapse">
    <lay-col md="24">
      <div class="userInfo">
        <div class="avat">
          <lay-avatar :src="uploadConfig.hostURL + userInfoStore.userInfo.avatar" radius class="avatar"></lay-avatar>
        </div>
        <div class="name-post">{{userInfoStore.userInfo.deptName}}</div>
        <div class="name">{{userInfoStore.userInfo.nickname}}</div>
        <div class="name-post">{{userInfoStore.userInfo.groupname}}</div>
        <div class="name-post">{{userInfoStore.userInfo.postName}}</div>
      </div>
      <lay-line theme="gray"></lay-line>
    </lay-col>
  </lay-row>

  <lay-menu :tree="true" :collapse="collapse" :level="appStore.level" :inverted="appStore.inverted"
    :theme="appStore.sideTheme" :openKeys="openKeys" :selectedKey="selectedKey" @changeOpenKeys="changeOpenKeys"
    @changeSelectedKey="changeSelectedKey">
    <GlobalMenuItem :menus="menus"></GlobalMenuItem>
  </lay-menu>
</template>

<script lang="ts">
import { defineComponent, ref, watch, defineEmits } from "vue";
import { uploadConfig } from "../../api/upload"
export default {
  name: "GlobalMenu",
};
</script>

<script lang="ts" setup>
import { useAppStore } from "../../store/app";
import { useUserStore } from "../../store/user";
import GlobalMenuItem from "./GlobalMenuItem.vue";
import { useMenu } from "../composable/useMenu";

const appStore = useAppStore();

interface MenuProps {
  collapse: boolean;
}
const userInfoStore = useUserStore();
const props = withDefaults(defineProps<MenuProps>(), {
  collapse: false,
});

const { selectedKey, openKeys, changeOpenKeys, changeSelectedKey, isAccordion, menus } = useMenu();

</script>

<style>
.userInfo {
  text-align: center;
  color: #fff;
  font-weight: lighter;
}

.userInfo .avat {
  height: 120px;
  width: 100%;
  line-height: 120px;
}

.userInfo .avat .avatar {
  width: 100px;
  height: 100px;

}

.userInfo .name {

  color: rgb(200, 198, 198);
  font-size: 20px;
  line-height: 30px;
  height: 30px;

}
.userInfo .name-post {

  color: rgb(160, 157, 157);
  font-size: 16px;
  line-height: 26px;
  height: 26px;
}

.layui-nav-tree * {
  font-size: 14px;
}

.layui-nav-tree .layui-nav-item>a,
.layui-nav-tree.inverted .layui-nav-item>a {
  padding: 3px 22px;
}

.layui-nav-tree.inverted .layui-this>a {
  padding: 3px 16px;
}

.layui-nav-tree .layui-nav-item>a>span {
  padding-left: 10px;
}

.layui-nav-tree .layui-nav-item>a .layui-nav-more {
  font-size: 12px !important;
  padding: 3px 0px;
}
</style>
